<template>
  <el-dialog :model-value="visible" :title="props.dialogTitle" width="50%" @close="handleClose">
    <el-form ref="ruleFormRef" :model="ruleForm" label-width="100px" class="demo-ruleForm" :rules="rules" status-icon>
      <el-form-item label="是否通过" prop="approval">
        <el-select v-model="ruleForm.approval" style="width: 100%;">
          <el-option label="通过" value="1"></el-option>
          <el-option label="驳回" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :rules="[{ required: ruleForm.approval == 2, message: '请选择是否通过', trigger: 'change' }]" label="审批意见"
        prop="des">
        <el-input v-model="ruleForm.des" placeholder="请填写审批意见" autosize type="textarea"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="success" @click="submitApproval">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
export default { name: 'fillApprovalDialog' }
</script>

<script setup>
import { ref, toRefs, reactive, onMounted, watch, defineProps, defineEmits } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'

const props = defineProps({
  dialogTitle: {
    type: String,
    default: "审核"
  },
  visible: {
    type: Boolean,
    default: false
  },
})

const emits = defineEmits(['update:visible', 'approvalChange'])

let { visible } = toRefs(props)

const handleClose = () => {
  // 触发自定义事件来通知父组件关闭弹窗
  emits('update:visible', false)
}

const ruleFormRef = ref(null)
const ruleForm = ref({
  approval: "1",
  des: ""
})
const rules = ref({
  approval: [
    { required: true, message: '请选择是否通过', trigger: 'change' }
  ],
  // des: [
  //   { required: ruleForm.value.approval == 2, message: '请选择是否通过', trigger: 'change' }
  // ],
})

/* 提交审批 */
const submitApproval = () => {
  ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      ElMessageBox.confirm(
        `确定要${ruleForm.value.approval == '1' ? '通过' : '驳回'}此条上报吗？`,
        '请确认',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        emits('approvalChange', ruleForm.value)
        emits('update:visible', false)
        setTimeout(() => {
          ruleFormRef.value.resetFields()
        }, 500)
      }).catch(err => {
        ElMessage.info("已取消操作")
      })
    } else {
      ElMessage.warning("请先完成必填项")
    }
  })
}
</script>

<style lang='scss' scoped></style>